<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>111111111</li>
        <li><a href="#">2222</a>111111111<span>span</span></li>
        <li>111111111</li>
        <p>pppppppppppp</p>
        <p>pppppppppppp</p>
        <p>pppppppppppp</p>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
        <li>111111111</li>
    </ul>
    <hr>
    <button>点击生成10个li</button>
    <ol>

    </ol>
</body>

</html>
<script>
    //一.事件委托。
    //利用冒泡机制，将子元素事件委托给父元素执行。
    //获取当前操作的目标元素：ev.target || ev.srcElement

    //案例：给50个li添加点击事件。
    //1.循环50次，给50个li添加点击事件。
    // var oUl = document.querySelector('ul');
    // var aLi = document.querySelectorAll('ul li');
    // for (var i = 0; i < aLi.length; i++) {
    //     aLi[i].onclick = function() {
    //         this.style.backgroundColor = 'orange';
    //     }
    // }


    //2.事件委托。
    //没有循环，给ul一个元素添加点击事件。
    //下面的方式减少事件的绑定次数。
    // oUl.onclick = function(ev) {
    //     var ev = ev || window.event;
    //     // console.log(ev.target); //获取目标元素对象。
    //     // console.log(ev.target.nodeName); //获取目标元素节点名称。
    //     // console.log(ev.target.tagName); //获取目标元素标签名称。
    //     if (ev.target.nodeName === 'LI') {
    //         //ev.target相当于当前操作的目标元素。
    //         ev.target.style.backgroundColor = 'orange';
    //     }
    // }


    //3.案例 - 渲染
    //将数组里面的数据渲染到10个li里面，而且可以随意删除任意一个li(点击任意li删除此li元素)
    //点击文档渲染li元素。
    // var list = document.querySelector('ol');
    // var btn = document.querySelector('button');
    // btn.onclick = function() {
    //     var arr = [1111, 2222, 3333, 4444, 5555, 6666, 7777, 8888, 9999, 10000];
    //     var str = '';
    //     arr.forEach(function(value) { //value:数组项的值
    //         str += '<li>' + value + '</li>';
    //     });
    //     // for (var i = 0; i < arr.length; i++) {
    //     //     str += '<li>' + arr[i] + '</li>';
    //     // }
    //     list.innerHTML = str;
    // }

    //给每一个li添加一个点击事件。
    //在这里根本无法获取li元素。需要点击文档才会产生。可以将事件委托给父元素。
    // alert(document.querySelectorAll('ol li').length);
    // list.onclick = function(ev) {
    //     var ev = ev || window.event;
    //     if (ev.target.nodeName === 'LI') { //判断是否点击了li元素。
    //         list.removeChild(ev.target); //将其删除
    //         //推到结果：如果不取消list的冒泡，一直冒泡到document上面，一旦冒泡document上面，重新渲染。
    //     }
    // };

    //4.事件委托的注意点。
    //如果无法获取元素，只能获取元素的父元素，依次类推。
    //如果子元素太多，可以考虑使用事件委托。
    //如果没有事件，就没有事件委托。



    //二.target srcElement  type属性
    //获取当前操作的目标元素：ev.target || ev.srcElement
    //获取当前操作的事件类型(不带on)：ev.type

    document.onclick = function(ev) {
        var ev = ev || window.event;
        console.log(ev.target);
        console.log(ev.srcElement);
        console.log(ev.srcElement.nodeName); //LI
        console.log(ev.srcElement.tagName); //LI
        console.log(ev.type); //click
    };
</script>